<!DOCTYPE html>
<html>
<head>
    <title>JXS Admin 客户管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <#scripts />
    <!-- Fonts -->
    <style type="text/css">
    </style>
</head>

<body class="flat-blue">
<div class="app-container expanded">
    <div class="row content-container">
        <#header headernames="客户管理 " />
        <#menu code="customer" pcode="service" />
        <!-- Main Content -->
        <div class="container-fluid">
            <div class="side-body" id="main">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-12 toolbar">
                                        <button type="button" class="btn btn-info" @click="handleAdd">添加新客户</button>
                                    </div>
                                    <div class="col-sm-12">
                                        <template>
                                            <el-table :data="tableData" label-width="450px">
                                                <el-table-column label="客户名称" prop="name"></el-table-column>
                                                <el-table-column label="年龄" prop="age"></el-table-column>
                                                <el-table-column label="邮箱" prop="email"></el-table-column>
                                                <el-table-column label="手机" prop="phone"></el-table-column>
                                                <el-table-column label="地址" prop="address"></el-table-column>
                                                <el-table-column label="操作">
                                                    <template slot-scope="scope">
                                                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            <#pagination />
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <#footer />
</div>
<!-- Javascript Libs -->
<script>
    var vm = new Vue({
        el: '#main',
        data: {
            tableData: [],
            size:10,
            current:1,
            total:0,
            pagesizes:false,
            layout:false
        },

        // 点击菜单使用的函数
        methods: {
            onload:function(){
                this.getTableData();
            },
            handleNodeClick:function(data){
                vm.pcode = data.code;
                vm.getTableData();
            },
            handleSizeChange(val) {
                vm.size = val;
                this.getTableData();
            },
            handleCurrentChange(val) {
                vm.current = val;
                this.getTableData();
            },
            getParams:function(){
                var params = new URLSearchParams();
                params.append('size', vm.size);
                params.append('current', vm.current);
                return params;
            },
            getTableData:function(){
                axios.post('/customer', vm.getParams()).then(function (response) {
                    var data = response.data.data;
                    //console.log(data)
                    vm.tableData = data.records;
                    vm.total = data.total;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            handleAdd:function(){
                layer.open({
                    type: 2,
                    title: '添加菜单',
                    shadeClose: false,
                    shade: 0.8,
                    area: ['800px', '600px'],
                    content: '${ctxPath}/customer/add' //iframe的url
                });
            },
            handleEdit(index,row){
                layer.open({
                    type: 2,
                    title: '编辑角色',
                    shadeClose: false,
                    shade: 0.8,
                    area: ['800px', '600px'],
                    content: '${ctxPath}/customer/edit/'+ row.id
                });
            },
            handleDelete(index,row){
                layer.confirm('是否确认删除?', {icon: 3, title:'删除'}, function(index){
                    axios.post('/customer/delete/'+row.id).then(function (response) {
                        layer.close(index);
                        vm.onload();
                    }).catch(function (error) {
                        layer.msg(error);
                    });
                });
            },
        }
    });
    vm.onload();
</script>
</body>

</html>
